<template>
    <div>
        <el-row class="mb20">
            <el-card>
                <div id="information_diagram" style="height:1000px;"></div>
            </el-card>
        </el-row>
    </div>
</template>

<script>
    import echarts from "echarts";

    export default {
        mounted() {
            this.homePage();
        },
        methods: {
            homePage() {
                var myChart = echarts.init(document.getElementById("information_diagram"));
                var data = [
                    {
                        name:'北门',
                        value: 96,
                        sum: 96
                    },
                    {
                        name:'西门',
                        value: 20,
                        sum:20
                    },
                    {
                        name: '东门',
                        value: 36,
                        sum: 36
                    },
                    {
                        name: '宿舍楼',
                        value: 230,
                        sum: 230
                    }, {
                        name: '行政楼',
                        value: 10,
                        sum: 10
                    },
                    {
                        name: '图书馆',
                        value: 120,
                        sum: 120
                    },
                    {
                        name: '教学楼',
                        value: 530,
                        sum: 530
                    },
                    {
                        name: '体育馆',
                        value: 16,
                        sum: 16
                    }
                ];
                function getArrByKey(data,names, k) {
                    let key = k || "value";
                    let res = [];
                    if (data) {
                        data.forEach(function (t) {
                            res.push(t[key]);
                        });
                    }
                    return res;
                };

                function getSymbolData(data) {
                    let arr = [];
                    for (var i = 0; i < data.length; i++) {
                        arr.push({
                            value: data[i].value,
                            symbolPosition: 'end'
                        })
                    }
                    return arr;
                }

                var opt = {
                    index: 0
                }
                var color = ['#a71a2b'];
                data = data.sort((a, b) => {
                    return b.value - a.value
                });
                // console.log(getSymbolData(data));
                var option = {
                    backgroundColor: '#000000',
                    grid: {
                        top: '2%',
                        bottom: -15,
                        right: 30,
                        left: 30,
                        containLabel: true
                    },
                    xAxis: {
                        show: false
                    },
                    yAxis: [{
                        triggerEvent: true,
                        show: true,
                        inverse: true,
                        data: getArrByKey(data, 'name'),
                        axisLine: {
                            show: false
                        },
                        splitLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            show: false,
                            interval: 0,
                            color: '#fff',
                            align: 'left',
                            margin: 80,
                            fontSize: 13,
                            formatter: function (value, index) {
                                return '{title|' + value + '}'
                            },
                            rich: {
                                title: {
                                    width: 165
                                }
                            }
                        },
                    }, {
                        triggerEvent: true,
                        show: true,
                        inverse: true,
                        data: getArrByKey(data, 'name'),
                        axisLine: {
                            show: false
                        },
                        splitLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            interval: 0,
                            shadowOffsetX: '-20px',
                            color: ['#fff'],
                            align: 'right',
                            verticalAlign: 'bottom',
                            lineHeight: 30,
                            fontSize: 13,
                            formatter: function (value, index) {
                                return (data[index].value / data[index].sum) * 100+"%"
                            },
                        }
                    }],
                    series: [{
                        name: 'XXX',
                        type: 'pictorialBar',
                        symbol: 'image://',
                        symbolSize: [50, 50],
                        symbolOffset: [20, 0],
                        z: 12,
                        itemStyle: {
                            normal: {
                                color: '#14b1eb'
                            }
                        },
                        data: getSymbolData(data)
                    }, {
                        name: '条',
                        type: 'bar',
                        showBackground: true,
                        barBorderRadius: 30,
                        yAxisIndex: 0,
                        data: data,
                        barWidth: 10,
                        // align: left,
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    1,
                                    0,
                                    [{
                                        offset: 0,
                                        color: '#A71A2B'
                                    },
                                        {
                                            offset: 0.7,
                                            color: '#A71A2B'
                                        },
                                        {
                                            offset: 1,
                                            color: '#5EDEE5'
                                        }
                                    ],
                                    false
                                ),
                                barBorderRadius: 10
                            },
                            // color: '#A71A2B',
                            barBorderRadius: 4,
                        },
                        label: {
                            normal: {
                                color: '#fff',
                                show: true,
                                position: [0, '-20px'],
                                textStyle: {
                                    fontSize: 16
                                },
                                formatter: function (a, b) {
                                    return a.name
                                }
                            }
                        }
                    }]
                };
                myChart.setOption(option);
                window.addEventListener("resize", function () {
                    myChart.resize();
                });
            }
        }
    }
</script>

<style scoped>

</style>
